<template>
	<view class="mons">
		<view class="top">
			<view class="mo">
				<view class="head">
					<image :src="user.cPortrait" mode="widthFix"></image>
				</view>
				<view class="name">
					{{user.cUserName}}
				</view>
				<view class="w">
					<view class="title">
						每日签到
					</view>
					<view class="oter">
						<view class="ome" v-if="l.week != 0" :class="{'act':l.sign == 1}" v-for="(l,index) in lists" :key="index">
							<view class="k">
								+1
								<view class="ok"  v-if="l.is_sign == 1">
									<image src="../../static/img/3/3-45.png" mode="widthFix"></image>
								</view>
							</view>
							{{index+1}}天
						</view>
						<!-- <view class="ome">
							<view class="k">
								+1
								<view class="ok">
									<image src="../../static/img/3/3-45.png" mode="widthFix"></image>
								</view>
							</view>
							星期天
						</view> -->
						
						
						<text></text>

						<b class="both"></b>
					</view>
					<view class="but" @click="qian(user.id)">
						已经续签到{{data.days}}天
					</view>
				</view>
			</view>

			<!-- 小程序头部兼容 -->
			<!-- #ifdef MP -->
			<image class="bac" src="../../static/img/3/3-44.png"></image>
			<!-- #endif -->
		</view>
		<view class="last">
			<view class="h2">
				<view class="b"></view>
				<view class="mos">
					<text>精选</text>
					积分兑换
				</view>
				<view class="b"></view>
			</view>
			<view class="cobox">

				<view class="guess-section">
					<view class="guess-item" v-for="item in goodsList" :key="item.pid">
						<view class="image-wrapper">
							<image :src="item.defaultAlbum" mode="widthFix"></image>
						</view>
						<text class="title clamp">{{item.pName}}</text>
						<text class="price">
							{{item.salepoints}}积分
							<text class="pay">￥{{item.fSalePrice}}</text>
				
						</text>
					</view>
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				user:[],
				data:[],
				lists:[],
				goodsList:[]
			}
		},
		onLoad() {
				this.loads();
				this.getGoodslist();
		},
		methods:{
			qian(id){
				var that = this;
				that.$Request.post4(
				that.$api.httpApi.user.sign+'?mid='+id,
				{mid:id}
				).then(res=>{
					uni.showToast({
						icon:'none',
						title:res.msg
					});
					if(res.code == 1){
						
						this.loads();
					}
				});
			},
			loads(){
				var that = this;
				
				that.$Request.post(
					that.$api.httpApi.user.userinfo+'&token='+that.$SysCache.get('token'),
					).then(res=>{
						if(res.code == 200){
							that.user=res.data;
							that.$Request.post4(
							that.$api.httpApi.user.signList+'?token='+that.$SysCache.get('token'),
							{mid:res.data.id}
							).then(res=>{
								if(res.code == 1){
									that.data=res.data;
									console.log(res.data)
								}
							});
							that.$Request.post4(
							that.$api.httpApi.user.signi+'?token='+that.$SysCache.get('token'),
							{mid:res.data.id}
							).then(res=>{
								if(res.code == 1){
									that.lists=res.data;
								}
							});
						}
					});
					
			},
			getGoodslist(){
				this.$Request.post(
					this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
						queryCondition: {
							order: {
								fieldname: "iOrder",
								direction: "asc"
							},
							pageindex: 1,
							pagesize: 12,
							where: [{
								fieldname: "productAttribute",
								valuefrom: 2
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {
					
						this.goodsList = res.data.data
					}
				})
			}
			
		}

	}
</script>

<style scoped>
	.cobox {
		margin-top: 43rpx;
	}

	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;


	}

	.guess-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 29upx;
		background: #fff;
		margin-bottom: 21upx;

	}

	.guess-item:nth-child(2n+1) {
		margin-right: 4%;
	}

	.image-wrapper {
		width: 100%;
		height: 330upx;
		border-radius: 3px;
		overflow: hidden;
		background: #fff;
		position: relative;
	}

	.image-wrapper image {
		width: 70%;
		opacity: 1;
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.price {
		font-size: 26rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: rgba(240, 64, 111, 1);
		padding-left: 30upx;
		position: relative;


	}

	.pay {
		font-size: 17upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		text-decoration: line-through
	}

	.collect {
		position: absolute;
		right: 29upx;
		bottom: 10upx;
		width: 30upx;
		height: 28upx;
		z-index: 1;
	}

	.last {
		padding-top: 342rpx;
	}

	.h2 {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #6D6455;
		text-align: center;
	}

	.mos {
		display: inline-block;
		vertical-align: middle;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.h2 .b {
		display: inline-block;
		vertical-align: middle;
		height: 3rpx;
		background: rgba(132, 123, 108, 1);
		width: 68rpx;
	}

	.h2 text {
		color: #C2AE8D;
	}

	.but {
		width: 609rpx;
		height: 85rpx;
		background: rgba(255, 255, 255, 1);
		margin: auto;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(183, 153, 103, 1);
		line-height: 85rpx;
		text-align: center;
		margin-top: 45rpx;
	}

	.both {
		display: block;
		clear: both;
		position: absolute;
	}

	.oter {
		margin-top: 49rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.ome {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(241, 233, 219, 1);
		float: left;
		/* margin-right: 60rpx; */
	}

	.ome:nth-child(7) {
		margin-right: 0;
	}

	.k {
		width: 35rpx;
		height: 35rpx;
		background: rgba(183, 152, 101, 1);
		border-radius: 50%;
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(219, 198, 163, 1);
		text-align: center;
		line-height: 35rpx;
		position: relative;
		z-index: 5;
		margin-bottom: 13rpx;
	}

	.k .ok {
		position: absolute;
		z-index: 10;
		width: 30rpx;
		height: 30rpx;
		left: 0;
		top: 0;
		/* display: none; */
	}

	.k .ok image {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.act .k .ok {
		display: block;
	}

	.oter text {
		display: block;
		width: calc(100% - 30rpx);
		height: 1px;
		background: #B79865;
		margin: auto;
		margin-top: 15rpx;
		position: absolute;
		z-index: 1;
	}

	.title {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.w {
		width: 680rpx;
		height: 370rpx;
		background: rgba(194, 174, 141, 1);
		margin: auto;
		position: absolute;
		z-index: 11;
		left: 0;
		right: 0;
		margin-top: 41rpx;
		padding-bottom: 67rpx;
		padding-top: 34rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	uni-page-body {
		height: 100%;
	}

	.mons {
		background: #EEEEEE;
		min-height: 100%;
	}

	.top {
		background: url(../../static/img/3/3-44.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 65rpx;
		padding-bottom: 125rpx;
		position: relative;
	}

	.top .bac {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
	}

	.head {
		width: 124rpx;
		height: 124rpx;
		display: block;
		background: rgba(255, 255, 255, 0.53);
		border: 1px solid rgba(255, 255, 255, 0.53);
		border-radius: 50%;
		margin: auto;
	}

	.head image {
		display: block;
		width: 102rpx;
		height: 102rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 50%;
		margin: auto;
		margin-top: 10rpx;
	}

	.name {
		text-align: center;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-top: 17rpx;
	}

	.mo {
		position: relative;
		z-index: 10;
	}

	.guess-item .title {
		font-size: 23rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #444444;
		line-height: 35rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 10;
	}
</style>
